<template>
  <div>
    <el-col :span="15">
      <el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border>
        <el-descriptions-item label="用户名">{{ user.name }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ user.tel }}</el-descriptions-item>
        <el-descriptions-item label="性别" :span="2">{{ user.sex }}</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">邮箱</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">{{ user.email }}</el-descriptions-item>
      </el-descriptions>
    </el-col>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { getUserByToken } from '@/api/user'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      user: { }
    }
  },
  created() {
    getUserByToken(getToken()).then(response => {
      this.user = response.data
      console.log(this.user)
    })
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
